<template>
  <div>
    <!-- 三个标签 -->
    <div class="icon">
      <a href="JavaScript:;" class="btn-i bg" @click="addplaylist"><i>播放</i></a>
      <a href="JavaScript:;" class="btn-ii bg"></a>
      <a href="JavaScript:;" class="btn-iii bg u-btn-i"
        ><i class="bg u-btn">收藏热门50</i></a
      >
    </div>
    <!-- 文字 -->
    <div
      class="m-text"
      v-for="(trackList, index) in trackList"
      :key="trackList.id"
    >
      <div class="t1 t2">
        <span>{{ index + 1 }}</span>
        <i
          class="t1-span"
          @click="playMusic(trackList.id, trackList.al.picUrl)"
        ></i>
      </div>

      <div class="t1">
        <a @click="gosong(trackList.id)">{{ trackList.name }}</a>
      </div>

      <div class="t1">
        <span>{{ moment(trackList.dt).format("mm:ss") }}</span>
      </div>

      <div class="t1">
        <a @click="goalbumpage(trackList.al.id)">{{ trackList.al.name }}</a>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      moment,
    };
  },
  props:['trackList'],
  methods:{
    // 播放全部
    addplaylist(){
      // const playlist = localStorage.getItem('playlist')
      // console.log(playlist)
      // 修改值达到同步
      this.$store.commit('ADDTRACKALL',this.trackList)
      localStorage.removeItem('playlist')
      localStorage.setItem('playlist',JSON.stringify(this.trackList))
      this.$bus.$emit('changeOne')
    },
     // 传参到播放列表
    playMusic(ids, picUrl) {
      //  console.log(this)
      this.$store.dispatch("getDetailList", ids);
      const big = {
        ids,
        picUrl,
      };
      this.$bus.$emit("singid", big);
    },
        // 跳转歌曲页
    gosong(id) {
       this.$router.push(`/song?ids=${id}`);
    },
    // 专辑
    goalbumpage(id){
      this.$router.push(`/albumpage?id=${id}`);
    }
  }

};
</script>

<style lang="less" scoped>
.m-text {
  width: 100%;
  display: grid;
  font-size: 12px;
  // grid-template-columns :repeat(auto-fill,);
  height: 35px;
  background-color: rgb(247, 247, 247);
  // grid布局
  border: solid 1px rgb(216, 216, 216);
  grid-template-columns: 74px auto 111px 14%;
  align-items: center;
  a {
    color: rgb(27, 25, 25);
  }
  .t1 {
    margin-left: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    .t1-a1 {
      .t1-as {
        width: 75px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }
  }

  .t2 {
    display: flex;
    justify-content: space-between;
    .t1-span {
      display: inline-block;
      margin-right: 10px;
      width: 17px;
      height: 17px;
      cursor: pointer;
      background-position: 0 -103px;
      background-image: url("~@/assets/image/table.png");
    }
  }
}
.m-text:nth-child(2n + 1) {
  background-color: rgb(255, 255, 255);
}

// 图标背景
.bg {
  background-image: url("~@/assets/image/button2.png");
}

.icon {
  margin-top: 15px;
  display: flex;
  height: 40px;
  align-items: center;
  a {
    color: #000;
  }
  .btn-i {
    display: inline-block;
    width: 66px;
    height: 31px;
    // background-position: right -428px;
    background-position: 0 -387px;
    text-align: end;
    i {
      margin-right: 5px;
      // margin-top: 10px
      line-height: 28px;
      color: #fff;
      font-style: normal;
    }
  }
  .btn-ii {
    display: inline-block;
    width: 38px;
    height: 31px;
    background-position: 0 -1588px;
  }
  .btn-iii {
    // background-position: right -1020px;
    i {
      background-position: 0 -977px;
    }
  }
}

// 六个标签要用的公共样式
.u-btn-i {
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  width: 99px;
  cursor: pointer;
  background-position: right -1019px;
  margin-right: 10px;
}
// 六个图标要用的i样式
.u-btn {
  font-size: 12px;
  //   color: #000;
  display: inline-block;
  width: 94px;
  height: 31px;
  text-align: right;
  line-height: 31px;
  min-width: 23px;
  cursor: pointer;
  font-style: normal;
}
</style>
